<template>
	<fu-popup v-model="show" mode="bottom" :safe-area-inset-bottom="true" :border-radius="24" :zIndex='9999'>
		<view class="padding xs_bj">
			<view class="flex justify-between padding-bottom">
				<view class="flex-sub text-center xs_title">
					<text class="xs_text">{{i18n['优惠']}}</text>
				</view>
				<view class="close-box" @tap="close"><text class="cuIcon-close"></text></view>
			</view>
			<scroll-view class="container" scroll-y>
				<view class="margin-bottom-sm cu-bg" :class="[item.is_receive == 1 ? 'disabled' : '']" v-for="(item, index) in info" :key="index">
					<view class="height-228 flex" >
					  <view class="left width-200   text-center flex align-center justify-center flex-direction"
					    style="line-height: .9;color: #F44830;" :class="[item.is_receive == 1 ? 'disabled' : '']">
					    <view>
					      <text class="text-price fu-fs40"></text>
					      <text class="" style="font-size: 80rpx;">{{ item.money | filterPrice }}</text>
					    </view>
					    <!-- <view class="fu-fs24 margin-top-sm">{{i18n['满']}}{{ item.min_order_money | filterPrice }}{{i18n['元使用']}}</view> -->
					  </view>
					  <view class="right   flex" style="min-width: 1px;">
					    <view class="flex-sub padding flex flex-direction justify-around" style="min-width: 1px;width: 360rpx;">
					      <view class="text-333 text-bold text-lg text-cut">{{ item.name }}</view>
					      <view class="text-999 text-sm text-cut-2" v-if='item && item.content'>{{item.content}}</view>
					      <view class="text-999 text-sm text-cut">{{i18n['有效期至']}} {{ item.end_time }}</view>
					    </view>
					    <view class="action   fu-fs28 flex align-center justify-center def-color"  style="width: 90rpx;"
					      :class="[item.is_receive == 1 ? 'disabled' : '']" @click="receive(item.id, index, item.is_receive)">{{ item.is_receive == 1 ? '已领取' : '领取'}}
					    </view>
					  </view>
					</view>
					<!-- <fu-coupon :discountPrice="item.money" :name="item.name" :time="item.end_time" :limit="item.min_order_money"
            :isUse="item.is_receive == 1" @click="receive(item.id, index, item.is_receive)" :item="item"></fu-coupon> -->
				</view>
			</scroll-view>
		</view>
	</fu-popup>
</template>

<script>
// import fuCoupon from '@/pages/user/components/fu-coupon/fu-coupon.vue';
export default {
  components: {
    // fuCoupon,
  },
	props: {
		info: {
			type: Array,
			default() {
				return [];
			}
		}
	},
	filters: {
	  filterPrice(price) {
	    return parseFloat(Number(price));
	  }
	},
	data() {
		return {
			show: false,
			curTab: 0
		};
	},
	watch: {},
	methods: {
    /**
     * @description 领取优惠卷
     * @param {Object} cid  优惠卷id
     * @param {Object} index  优惠卷序号
     * @param {Object} is_receive  判断是否已经领取优惠卷
     */
    receive(cid, index, is_receive) {
      // 前端判断已领取得点击失效
      if (is_receive == 1) {
        return this.$message.info(this.i18n['已领取过该优惠券~']);
      }
      this.$api
        .post(global.apiUrls.postReceiveCoupon, {
          cid: cid
        })
        .then(res => {
          this.$message.info(res.data.msg);
          if (res.data.code == 1) {
            this.$emit('changeInfo', index);
          }
        });
    },
		open() {
			this.show = true;
		},
		close() {
			this.show = false;
		}
	}
};
</script>

<style lang="scss" scoped>
	.right {
		padding: 22rpx 0;
	  .action {
	    border-top-right-radius: 16rpx;
	    border-bottom-right-radius: 16rpx;
	    // background: linear-gradient(359deg, #FE8B20 0%, #FE5114 100%);
	    // writing-mode: tb-rl;
	    // letter-spacing: 6rpx;
		font-weight: bold;
	  }
	
	  .action.disabled {
	    // background: #999999;
	  }
	}
	
	.left {
	  border-top-left-radius: 16rpx;
	  border-bottom-left-radius: 16rpx;
	  padding-left: 60rpx;
	  // background: linear-gradient(359deg, #FE8B20 0%, #FE5114 100%);
	
	  &.disabled {
	    color: #999999!important;
	  }
	}
.xs_bj {
	background: #f7f7f7;
	word-break: break-all;
}
.container {
	height: 700rpx;
}
.xs_title {
	font-size: 36upx;
	font-weight: bold;
	color: #333333;
	display: flex;
	align-items: center;
	justify-content: center;
	.xs_text {
		padding: 0 18upx;
		margin-top: 10upx;
	}
	.xs_circle {
		width: 10upx;
		height: 10upx;
		background: #fa2033;
		border-radius: 50%;
		margin: 0 6upx;
	}
	.opacity50 {
		opacity: 0.5;
	}
}

.cu-bg{
	// background-image: url($IMG_BASE_URL + 'goods/cu-bg.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	 &.disabled{
		 // background-image: url($IMG_BASE_URL + 'goods/cu-bgd.png');
		 background-size: 100% 100%;
		 background-repeat: no-repeat;
		
	 }
}
.height-228{
	height: 228rpx;
}
.def-color{
	color: #C95A38;
	&.disabled {
	  color: #ffffff;
	}
}

</style>
